<!--
	此示例下载自 https://echarts.apache.org/examples/zh/editor.html?c=area-time-axis
-->
<!DOCTYPE html>
<html lang="zh-CN" style="height: 100%">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="myWordcloud" style="height: 50%"></div>
<div id="myTimeline" style="height: 50%"></div>

<link rel="stylesheet" th:href="@{/webjars/bootstrap/5.3.0/css/bootstrap.min.css}">
<script th:src="@{/webjars/jquery/3.6.0/jquery.min.js}"></script>
<script th:src="@{/webjars/bootstrap/5.3.0/js/bootstrap.min.js}"></script>
<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
<!-- Uncomment this line if you want to dataTool extension
<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.3/dist/extension/dataTool.min.js"></script>
-->
<!-- Uncomment this line if you want to use gl extension
<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts-gl@2/dist/echarts-gl.min.js"></script>
-->
<!-- Uncomment this line if you want to echarts-stat extension
<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts-stat@latest/dist/ecStat.min.js"></script>
-->
<!-- Uncomment this line if you want to use map
<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@4.9.0/map/js/china.js"></script>
<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@4.9.0/map/js/world.js"></script>
-->
<!-- Uncomment these two lines if you want to use bmap extension
<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=YOUR_API_KEY"></script>
<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.3/dist/extension/bmap.min.js"></script>
-->

<script th:inline="javascript">
  $(document).ready(function () {
  myWordcloud = echarts.init(document.getElementById('myWordcloud'));

  // 定义时间轴的数据
  const timelineData = [[${timelineData}]];
  // 事件的数据
  const eventData = [[${eventData}]];

  // 定义时间轴的配置
  const timelineOption = {
    axisType: 'category',
    autoPlay: true,
    playInterval: 2000,
    data: timelineData,
    label: {
      formatter: function (value) {
        var event = eventData.find(function (event) {
          return event.value === value;
        });
        return event ? event.name : '';
      },
    },
  };

  // 定义事件的配置
  const eventOption = {
    type: 'timeline',
    data: eventData,
  };

  // 定义图表的配置
  option = {
    timeline: timelineOption,
    series: [eventOption],
  };

  // 设置时间轴变化时的事件
          myWordcloud.on('timelinechanged', function (params) {
    const selectedEvent = eventData.find(function (event) {
      return event.value === params.currentIndex;
    });

    if (selectedEvent) {
      document.getElementById('tags').innerText = '个人标签1：涉黄、涉毒、涉赌';
      document.getElementById('info').innerText = '个人统计信息1：车辆3台，案件2个，关联人15个，关联地点13个';
    }
  });

  // 渲染图表
          myWordcloud.setOption(option);
  }
  )
</script>
</body>
</html>